<template>
	<view>
		<view class="drop">
			<view class="dropTitle" @click="qyClick">
				<text>区域</text>
				<u-icon name="arrow-down-fill" size="22rpx"></u-icon>
			</view>
			<view class="dropTitle" @click="jgClick">
				<text>价格</text>
				<u-icon name="arrow-down-fill" size="22rpx"></u-icon>
			</view>
			<view class="dropTitle" @click="hxClick">
				<text>户型</text>
				<u-icon name="arrow-down-fill" size="22rpx"></u-icon>
			</view>
			<view class="dropTitle" @click="gdClick">
				<text>更多</text>
				<u-icon name="arrow-down-fill" size="22rpx"></u-icon>
			</view>
		</view>


		<!-- 弹出层 -->
		<view class="popup">
			<u-popup :show="dropShow" :safeAreaInsetTop="true" mode="top">
				<view>
					<u-list>
						<u-list-item v-for="(item, index) in arr" :key="index">
							<u-cell @click='find' :title="item">
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</u-popup>
		</view>
	</view>

</template>

<script>
	export default {
		name: "MyDropDown",
		data() {
			return {
				dropShow: false,
				arr: [],
				list: []
			};
		},
		methods: {
			// 区域模块
			qyClick() {
				if (this.dropShow) {
					this.dropShow = false
				} else {
					this.dropShow = true
					let arr1 = ['青羊区', '锦江区', '崇州市', '武侯区', '双流区']
					this.arr = arr1
				}
			},
			// 价格模块
			jgClick() {
				if (this.dropShow) {
					this.dropShow = false
				} else {
					this.dropShow = true
					let arr1 = ['不限', '2万以上', '1万以上', '0.5万-1万', '0.5万以下']
					this.arr = arr1
				}
			},
			// 户型模块
			hxClick() {
				if (this.dropShow) {
					this.dropShow = false
				} else {
					this.dropShow = true
					let arr1 = ['不限', '一居室', '二居室', '三居室', '四居室', '五居室以上']
					this.arr = arr1
				}
			},
			// 下拉菜单选择
			find() {
				console.log(123);
			},



			// 更多模块
			gdClick() {
				if (this.dropShow) {
					this.dropShow = false
				} else {
					this.dropShow = true
					let arr1 = ['项目特色', '物业类型', '销售状态', '装修情况', '家政服务']
					this.arr = arr1
				}
			}
		}
	}

</script>

<style lang="scss">
	.drop {
		background-color: #fff;
		display: flex;
		border: 1rpx solid #eee;
		padding: 20rpx 0;
	}


	.dropTitle {
		display: flex;
		width: 33.3%;
		justify-content: center;
		align-items: center;
	
	}
	
	/deep/.u-transition {
		top: 240rpx !important;
		height: 80rpx;
		line-height: 80rpx;
	}

</style>